<template>
  <div class='container'>
    <el-card class="box-card">
<span>杨会可</span>
      <!-- 搜索添加表单 -->
      <el-form :inline="true">
        <el-form-item label="学科名称">
          <el-input v-model.trim="table.subjectName" size="small" ></el-input>
        </el-form-item>
        <el-form-item>
         <el-button size="small" @click="onClear">清除</el-button>
         <el-button type="primary" size="small" @click="onSearch">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right" >
          <el-button type="success" icon="el-icon-edit" size="small" @click="onEdit">新增学科</el-button>
        </el-form-item>
      </el-form>

      <!-- 提示信息 -->
      <el-alert
        :title="'数据一共 ' + total + ' 条'"
        type="info"
        show-icon
        :closable="false">
      </el-alert>

      <!-- table表格 -->
      <el-table
        :data="subjectList"
        style="width: 100%">

        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>

        <el-table-column
          prop="subjectName"
          label="学科名称"
          >
        </el-table-column>

        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>

        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180">
        </el-table-column>

        <el-table-column label="前台是否显示">
          <template slot-scope="scope" >
            <span>{{ scope.row.isFrontDisplay=== 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录">
        </el-table-column>

        <el-table-column
          prop="tags"
          label="标签">
        </el-table-column>

        <el-table-column
          prop="totals"
          label="题目数量">
        </el-table-column>

        <el-table-column
          label="操作"
          width="250">
          <template slot-scope="{row}">
            <el-button type="text" @click="onClassify(row)">学科分类</el-button>
            <el-button type="text" @click="onTags(row)">学科标签</el-button>
            <el-button type="text" @click="onEdit(row)">修改</el-button>
            <el-button type="text" @click="onDel(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="table.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>

      <!-- 学科修改框 -->
      <el-dialog
        :title="title"
        :visible.sync="subjectEditDialog"
        @close="onClose"
        width="30%">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model.trim="form.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="form.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="subjectEditDialog = false">取 消</el-button>
          <el-button type="primary" @click="onSave">确 认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// import TopSearch from '../components/top-search.vue'
import { list, remove, update, add } from '@/api/hmmm/subjects.js'
export default {
  components: {
  },
  data () {
    return {
      // searchName: '',
      subjectList: [],
      currentPage: 1,
      total: 0,
      // 表格数据
      table: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      subjectEditDialog: false,
      // 表单数据
      form: {
        subjectName: '',
        isFrontDisplay: false
      },
      // 校验规则
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'change' }
        ]
      },
      title: ''
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 点击清除
    async onClear () {
      this.table = {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
      await this.getSubjectList()
    },
    // 获取 / 搜索 学科列表
    async getSubjectList () {
      try {
        const { data } = await list(this.table)
        data.items.forEach(item => {
          item.addDate = this.formatDate(item.addDate)
        })
        this.subjectList = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('数据获取失败! ')
      }
    },
    // 搜索列表
    async onSearch () {
      this.table.page = 1
      this.getSubjectList()
    },
    // 每页显示多少条发生变化时
    async handleSizeChange (val) {
      this.table.pagesize = val
      this.getSubjectList()
    },
    // 点击页码值发生变化时
    async handleCurrentChange (val) {
      this.table.page = val
      this.getSubjectList()
    },
    // 删除学科
    onDel (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        // 更新当前页码
        const totalPage = Math.ceil((this.total - 1) / this.table.pagesize)
        const currentPage = this.table.page > totalPage ? totalPage : this.table.page
        this.table.page = this.table.page < 1 ? 1 : currentPage
        this.getSubjectList()
        this.$message.success('删除成功! ')
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    // 点击修改学科
    async onEdit (row) {
      if (!row.id) {
        this.title = '新增学科'
        this.subjectEditDialog = true
      } else {
        this.title = '修改学科'
        this.subjectEditDialog = true
        this.form.subjectName = row.subjectName
        this.form.id = row.id
        this.form.isFrontDisplay = !!row.isFrontDisplay
      }
    },
    // 点击确认
    async onSave () {
      await this.$refs.form.validate()
      if (this.title === '新增学科') {
        await add(this.form)
      } else {
        await update(this.form)
      }
      this.subjectEditDialog = false
      this.$message.success('操作成功')
      this.getSubjectList()
    },
    // 点击学科分类
    async onClassify (row) {
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 点击学科标签
    async onTags (row) {
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 对话框关闭
    onClose () {
      this.$refs.form.resetFields()
      setTimeout(() => {
        this.form = {
          subjectName: '',
          isFrontDisplay: false
        }
      }, 800)
    },
    // 格式化时间
    formatDate (time) {
      const data = new Date(time).toJSON()
      return new Date(+new Date(data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 10px;
  .el-form {
    padding: 0 10px;
    .el-form-item {
      margin-bottom: 15px;
    }
  }

  .el-alert {
    margin-bottom: 15px;
  }

  /deep/.el-table td.el-table__cell {
    height: 57px;
  }

  .el-pagination {
    margin: 20px 0;
    float: right;
  }
}
</style>
